<html>
	<head>
		<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
	</head>

	<body>
		<script src="http://code.jquery.com/jquery-latest.js"></script>
		<script src="/bootstrap/js/bootstrap.min.js"></script>
		{% include "navigationbar.html" %}

		<div>
			<h1>コンポーネント管理</h1>
			
			<h6>品目一覧</h6>
			<div class="tabbable tabs-left"> <!-- Only required for left/right tabs -->
				<ul class="nav nav-tabs">
				{% for p in products %}
					<li {{'class="active"' if p.orderno == products[0].orderno}}><a href="#p_{{p.orderno}}" data-toggle="tab">{{p.name}}</a></li>
				{% endfor %}
				</ul>
				<div class="tab-content">
				{% for p in products %}
					<div class="tab-pane{{ ' active' if p.orderno == products[0].orderno }}" id="p_{{p.orderno}}">
						<table class="table table-hover">
							<thead>
								<tr><th>コンポート名</th><th>日本語名</th></tr>
							</thead>
							<tbody>
							{% for c in p.components %}
								<tr><td>{{c.name}}</td><td>{{c.japaneseName}}</td></tr>
							{% endfor %}
							</tbody>
						</table>

						<div id="p_{{p.orderno}}" class="tab-pane{{ ' active' if p.orderno == products[0].orderno}}">
							<a href="#newComponent_{{p.orderno}}" class="btn" data-toggle="modal">新規作成</a>
						</div>

						<!-- 新規追加ダイアログ -->
						<div id="newComponent_{{p.orderno}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="headerLabel_{{p.orderno}}" aria-hidden="true">
							<form action="componentManager/add" method="post">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
									<h3 id="headerLabel_{{p.orderno}}">コンポーネント追加：{{p.name}}</h3>
								</div>
								<div class="modal-body">
									<table style="width:100%">
										<tr><td style="6em">名称：</td><td><input type="text" name="name" value="" style="width:100%"/></td></tr>
										<tr><td style="6em">日本語名称：</td><td><input type="text" name="japaneseName" value="" style="width:100%"/></td></tr>
									</table>
									<input type="hidden" name="orderno" value="{{p.orderno}}"/>
								</div>
								<div class="modal-footer">
									<a href="#" class="btn" data-dismiss="modal">キャンセル</a>
									<input type="submit" class="btn btn-primary" value="OK"/>
								</div>
							</form>
						</div>

						<!-- 編集ダイアログ -->
						<div id="editComponent_{{p.orderno}}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="headerLabel_{{p.orderno}}" aria-hidden="true">
							<form action="productManager/edit" method="post">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
									<h3 id="headerLabel_{{p.orderno}}">コンポーネント編集：{{p.name}}</h3>
								</div>
								<div class="modal-body">
									<table>
										<tr><td>名称：</td><td><input type="text" name="name" value=""/></td></tr>
										<tr><td>日本語名称：</td><td><input type="text" name="japaneseName" value=""/></td></tr>
									</table>
								</div>
								<div class="modal-footer">
									<input type="submit" class="btn btn-danger" value="削除"/>
									<a href="#" class="btn" data-dismiss="modal">キャンセル</a>
									<input type="submit" class="btn btn-primary" value="OK"/>
								</div>
							</form>
						</div>
					</div>
				{% endfor %}
				</div>
			</div>
		</div>
	</body>
</html>